<template>
    <div>
        <van-popup v-model="showMenu" position="top" :overlay="false" close-on-click-overlay overlay>

            <van-list>
                <van-cell >请选择您要执行的操作</van-cell>
                <van-cell ><van-button type="danger"  block @click="deleteAllMsg">删除本页消息</van-button></van-cell>
                <van-cell ><van-button type="info"  block @click="readAllMsg">标记本页消息为已读</van-button></van-cell>
            </van-list>

        </van-popup>
        <van-nav-bar title="我的消息"
                left-text="刷新"
                right-text="更多"

                     @click-left="refreshNewMsgs"
                @click-right="onMenu">

        </van-nav-bar>
    <van-tabs v-model="active" title-active-color="#f39801" color="#f39801">
        <van-tab title="最新">


                <van-swipe-cell :right-width="4.00*rootValue"  v-for="item in list"
                                :key="item.id"
                                >
                    <van-cell-group>
                        <van-cell :title="item.title" :value="item.createTime" :label="item.content"/>
                    </van-cell-group>
                    <div slot="right">
                        <van-button type="warning" class="swipe_left" square @click="readMsg([item.id])">已读</van-button>
                        <van-button type="danger" class="swipe_right" square @click="deleteMsg([item.id])">删除
                        </van-button>
                    </div>

                </van-swipe-cell>

        </van-tab>
        <van-tab title="历史">
            <div class="level2_msg_box">                <van-swipe-cell :right-width="4.00*rootValue"  v-for="item in
             hlist"
                                                                        :key="item.id"
            >
                <van-cell-group>
                    <van-cell :title="item.title" :value="item.createTime" :label="item.content"/>
                </van-cell-group>

            </van-swipe-cell></div>
        </van-tab>
<!--        <van-tab title="作品">-->
<!--            <div class="level2_msg_box">暂无消息</div>-->
<!--        </van-tab>-->
<!--        <van-tab title="系统">-->
<!--            <div class="level2_msg_box">暂无消息</div>-->
<!--        </van-tab>-->
    </van-tabs>
    </div>
</template>

<script>

    import ltxService from '../services/LtxService'
    import {Toast} from "vant";
    export default {
        mounted(){
            this.rootValue=document.getElementsByTagName("html")[0].style.fontSize.replace("px","");
            console.log(this.rootValue)
            this.refreshNewMsgs()
        },
        name: "Msg.vue",
        data() {
            return {
                rootValue:0,
                scale:0,
                list: [],
                hlist:[],
                loading: false,
                finished: false,
                active:0,
                showMenu:false
            };
        },

        methods: {
            deleteAllMsg()
            {
                let msgids=[]
                this.list.forEach(x=>msgids.push(x.id))
                this.deleteMsg(msgids)
            },
            readAllMsg()
            {
                let msgids=[]
                this.list.forEach(x=>msgids.push(x.id))
                this.readMsg(msgids)
            },
            deleteMsg(msgIds)
            {
                ltxService.deleteMsgs(msgIds).then(()=>{this.refreshNewMsgs()})
            },
            readMsg(msgIds)
            {
                ltxService.readMsgs(msgIds).then(()=>{this.refreshNewMsgs()})

            },
            refreshNewMsgs()
            {

                ltxService.getMsgs("reply",false).then((resp)=>{

                    this.list.splice(0,this.list.length)
                    for (let i = 0; i <resp.data.data.length; i++) {
                        this.list.push(resp.data.data[i]);
                    }

                })
                ltxService.getMsgs("reply",true).then((resp)=>{

                    this.hlist.splice(0,this.hlist.length)
                    for (let i = 0; i <resp.data.data.length; i++) {
                        this.hlist.push(resp.data.data[i]);
                    }
                    Toast("加载完成")
                })
            },
            onClose(clickPosition, instance) {
                switch (clickPosition) {
                    case 'left':


                        break
                    case 'cell':
                    case 'outside':
                        instance.close();
                        break;
                    case 'right':
                        Dialog.confirm({
                            message: '确定删除吗？'
                        }).then(() => {
                            instance.close();
                        });
                        break;
                }
            }, onMenu(){
                this.showMenu=true
            },
            onLoad() {
                // this.refreshNewMsgs()

                // // 异步更新数据
                // setTimeout(() => {
                //     for (let i = 0; i < 10; i++) {
                //         this.list.push(this.list.length + 1);
                //     }
                //     // 加载状态结束
                //     this.loading = false;
                //
                //     // 数据全部加载完成
                //     if (this.list.length >= 40) {
                //         this.finished = true;
                //     }
                // }, 500);

            }
        }
    }
</script>

<style lang="scss" scoped>
    .level2_msg_box{
        padding: 20px 0;
        text-align: center;
    }
.van-swipe-cell{
    span{

    }

    .swipe_left,.swipe_right{
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*height: 44px;*/
        /*line-height: 44px;*/
        /*padding: 0 15px;*/
        /*background-color: red;*/
    }
}
</style>